<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Png-6 demo</title>
<style>
* {margin:0;padding:0;border:0;list-style:none;}
body {padding:30px 50px;background:#444;color:#eee;font-size:75%;font-family:arial,sans-serif;}
h1, h2 {font-weight:normal;padding:0 0 .8em;} 
h1 {font-size:25px;}
h2 {font-size:18px;}
p {padding:0 0 1.5em;}
ul {margin:auto;text-align:center;zoom:1;overflow:hidden;}
li {float:left;}
li.clr {clear:both;float:none;font-size:0;line-height:0;height:0;_margin-bottom:-2px;}
.resized {clear:both;}
.resized img {width:70px;}


a {
	float: left;
	text-align: center;
	border: 3px solid;
	border-color: #eee #555 #444 #ddd;
	background: #bada55;
	}

img {
	vertical-align: middle;
	}
	
a img {
	cursor: pointer;
	}
	
a:hover {
	background: blue;
	}

/* 
	The png-6 element styles are applied inline, so '!important' declarations are needed to override
*/
a:hover img,
a:hover png6-box {
	border: 5px solid red !important;
	padding: 10px !important;
	margin: 10px !important;
	}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<!--[if IE]>
<script src="../trunk/src/png-6.js"></script>
<script>

// Use jQuery selector engine since it's available
Png6.setSelectorEngine( jQuery );

// Convert images when the dom is ready 
$( document ).ready(function () {
	Png6.convert( 'a > img' );
});

</script>
<![endif]-->

</head>
<body>

<h1>Png-6 Demo</h1>
<p>Hover over images to see added padding, border and margin.</p>

<ul>
	<li>
		<a href=""><img alt="6" title="Hello" src="test.png" /></a>
	</li>
	<li>
		<a href=""><img alt="6" title="Hello again" src="test.png" /></a>
	</li>
	<li>
		<a href=""><img alt="6" title="Still here" src="test.png" /></a>
	</li>
</ul>



<br />
<br />

<h2>Resized images</h2>

<ul class="resized">
	<li>
		<a href=""><img alt="6" title="Hello" src="test.png" /></a>
	</li>
	<li>
		<a href=""><img alt="6" title="Hello again" src="test.png" /></a>
	</li>
	<li>
		<a href=""><img alt="6" title="Still here" src="test.png" /></a>
	</li>
</ul>

</body>
</html>
